<template>
    <Mapbox :mapOnLoadCB="mapOnLoadCB"></Mapbox>
</template>

<script>
    import {ref} from "vue"
    import Mapbox from "@/components/common/Mapbox.component.vue"
    import MapboxCommonService from "@/service/map/MapboxCommonService"

    export default {
        name: "AddMassivePoint.component",
        components: {Mapbox},
        setup() {

            let mapStore = ref({});
            let mapOnLoadCB = (map) => {
                mapStore.value = map;
                MapboxCommonService.setCZBP(map,[-122.447303, 37.753574],12)

                // 给圆添加数据驱动属性的样式，使用circle-color数据表达式来进行可视化。
                map.addLayer({
                    'id': 'population',
                    'type': 'circle',
                    'source': {
                        type: 'vector',
                        url: `${window.location.origin}/mapbox/libs/mapbox/assets/examples.8fgz4egr.json`
                    },
                    'source-layer': 'sf2010',
                    'paint': {
                        // make circles larger as the user zooms from z12 to z22
                        'circle-radius': {
                            'base': 1.75,
                            'stops': [[12, 2], [22, 180]]
                        },
                        // color circles by ethnicity, using a match expression
                        // https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-match
                        'circle-color': [
                            'match',
                            ['get', 'ethnicity'],
                            'White', '#fbb03b',
                            'Black', '#223b53',
                            'Hispanic', '#e55e5e',
                            'Asian', '#3bb2d0',
                            /* other */ '#ccc'
                        ]
                    }
                });
            };

            return {
                mapOnLoadCB
            }
        }
    }
</script>

<style scoped>

</style>
